// 引入request请求函数
import { request } from '../../request/request'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 轮播图列表
    swiperImgList: [],
    // 商品信息
    goodsInfo: '',
    // 商品属性（参数）
    goodsAttribute: [],
    // 富文本内容
    richContent: '',
    // 商品常见问题
    goods_issue: [],
    // 相关商品列表
    goodsRelatedList: [],
    // 购物车商品件数
    cartNum: 0,
    // 控制选择规格页面是否显示
    hidePage: true,
    // 选择的商品数量，默认为1
    goodsCount: 1,
    // 用户是否收藏,0:未收藏，1: 已收藏
    userHasCollect: 0,
    // 评论
    comment: {},
    productList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // options中的id是字符串，需要转变成数字
    this.getGoodsDetail(options.id - 0)
    this.getGoodsRelated(options.id - 0)
    this.getCartNum()
  },
  onShow: function () {

  },
  // 发送请求获取商品详情数据
  async getGoodsDetail(id) {
    const res = await request({url: '/goods/detail', data: {id}})
    // 获取商品描述，富文本内容
    let richText = res.data.info.goods_desc
    // 使用正则匹配更改富文本样式
    // 给富文本中的img标签加一个我们自己写的className(即rich-img)来统一控制img样式
    let richContent = richText.replace(/\<img/g, '<img class="rich-img" ')
    this.setData({
      swiperImgList: res.data.gallery,
      goodsInfo: res.data.info,
      goodsAttribute: res.data.attribute,
      richContent,
      goods_issue: res.data.issue,
      userHasCollect: res.data.userHasCollect,
      productList: res.data.productList,
      comment: res.data.comment
    })
  },
  // 发送请求获取相关商品数据
  async getGoodsRelated(id) {
    const res = await request({url: '/goods/related', data: {id}})
    this.setData({
      goodsRelatedList: res.data.goodsList
    })
  },
  // 发送请求获取购物车商品数量
  async getCartNum() {
    const res = await request({url: '/cart/goodscount'})
    this.setData({
      cartNum: res.data.cartTotal.goodsCount
    })
  },
  // 监听点击轮播图，放大图片事件
  handlePreviewImg(e) {
    // 获取当前点击图片的http链接
    const { src } = e.currentTarget.dataset
    let { swiperImgList } = this.data
    // 循环数组，获取预览图片的链接
    let urls = swiperImgList.map(item => item.img_url)
    // 调用微信预览图片接口
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls // 需要预览的图片http链接列表
    })
  },
  // 点击选择规格数量一行，显示对应页面
  showChoosePage() {
    this.setData({
      hidePage: false
    })
  },
  // 点击X图标，关闭选择规格页面
  closeChoosePage() {
    this.setData({
      hidePage: true
    })
  },
  // 点击+、-增减商品数量
  handleEditNum(e) {
    // 根据传递的参数判断增、减操作
    let { params } = e.currentTarget.dataset
    // 获取商品数量
    let { goodsCount } = this.data
    console.log(params)
    // 若商品数量为1且进行减少操作，直接return
    if (params === -1 && goodsCount <= 1) {
      wx.showToast({
        title: '最少购买一件哦！',
        icon: 'none',
        image: '',
        duration: 1500,
        mask: true
      })
      return
    } else {
      // 增、减数量
      goodsCount += params
    }
    this.setData({
      goodsCount
    })
  },
  // 监听直接输入更改商品数量
  handleInput(e) {
    let { value } = e.detail
    // 启用正则匹配，只能输入正整数
    value = value.replace(/[^\d.]/g, '')
    // 正则匹配后，若值为空，让其=1
    if (!value) value = 1
    this.setData({
      goodsCount: parseInt(value)// 有小数点，取整
    })
  },
  // 用户点击收藏图标
  async handleCollect() {
    let { userHasCollect, goodsInfo } = this.data
    const res = await request({
      url: '/collect/addordelete',
     method: 'POST', 
     data: { typeId: 0, valueId: goodsInfo.id  }
    })
    console.log(res)
    if(res.data.type === 'add') {
      // 添加收藏
      userHasCollect = 1
    } else {
      // 取消收藏
      userHasCollect = 0
    }
    this.setData({
      userHasCollect
    })
  },
  // 监听点击加入购物车事件
  async addToCart() {
    const { goodsInfo, goodsCount, productList } = this.data
    const res = await request({url: '/cart/add', method: 'POST', data: { goodsId: goodsInfo.id, number: goodsCount, productId: productList[0].id }})
    console.log(res)
    // 添加成功与否，显示消息提示框
    if (res.errno === 0) {
      wx.showToast({
        title: '添加购物车成功',
        icon: 'success',
        image: '',
        duration: 1500,
        mask: true
      })
      // 更新购物车数量显示,同时隐藏选择规格页面
      this.setData({
        cartNum: res.data.cartTotal.goodsCount,
        hidePage: true
      })
    } else {
      wx.showToast({
        title: '添加购物车失败',
        icon: 'none',
        image: '',
        duration: 1500,
        mask: true
      })
    }
  }
})